<template>
    <div class="min-h-screen bg-gray-50">
        <div class="grid grid-cols-1 lg:grid-cols-2 h-screen">
            <!-- 左侧品牌区域 -->
            <div class="hidden lg:flex justify-center items-center relative bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 overflow-hidden animate__animated animate__bounceInLeft animate__fast
">
                <!-- 背景图片 -->
                <div class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-30" 
                     :style="`background-image: url(${backgroundImage}); background-position: center bottom;`"></div>
                
                <!-- 背景装饰元素 -->
                <div class="absolute inset-0">
                    <div class="absolute top-20 -left-20 w-40 h-40 bg-blue-200/30 rounded-full blur-3xl"></div>
                    <div class="absolute bottom-32 -right-16 w-32 h-32 bg-indigo-200/40 rounded-full blur-2xl"></div>
                    <div class="absolute top-1/3 right-1/4 w-24 h-24 bg-slate-200/20 rounded-full blur-xl"></div>
                </div>

                <!-- 内容区域 -->
                <div class="relative z-10 text-center max-w-md px-8">
                    <!-- Logo区域 -->
                    <div class="mb-16">
                        <div class="w-18 h-18 mx-auto mb-8 bg-white/90 backdrop-blur-sm rounded-2xl flex items-center justify-center shadow-lg border border-white/50">
                            <svg class="w-9 h-9 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                        </div>
                        <h2 class="text-4xl font-bold text-slate-800 mb-4 leading-tight">手写线程池的博客</h2>
                        <p class="text-slate-600 text-lg leading-relaxed font-medium">
                            简洁高效的博客管理平台
                        </p>
                    </div>
                    
                    <!-- 特性列表 -->
                    <div class="space-y-8">
                        <div class="flex items-center space-x-5 bg-white/70 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-white/60">
                            <div class="w-10 h-10 bg-blue-500/90 rounded-lg flex items-center justify-center shadow-sm">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
                                </svg>
                            </div>
                            <span class="text-slate-700 font-semibold text-lg">现代化设计</span>
                        </div>
                        <div class="flex items-center space-x-5 bg-white/70 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-white/60">
                            <div class="w-10 h-10 bg-indigo-500/90 rounded-lg flex items-center justify-center shadow-sm">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
                                </svg>
                            </div>
                            <span class="text-slate-700 font-semibold text-lg">前后端分离</span>
                        </div>
                        <div class="flex items-center space-x-5 bg-white/70 backdrop-blur-sm rounded-xl p-4 shadow-sm border border-white/60">
                            <div class="w-10 h-10 bg-purple-500/90 rounded-lg flex items-center justify-center shadow-sm">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/>
                                </svg>
                            </div>
                            <span class="text-slate-700 font-semibold text-lg">响应式体验</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧登录表单区域 -->
            <div class="flex justify-center items-center p-8 lg:p-12 bg-gray-50 animate__animated animate__bounceInRight animate__fast
">
                <div class="w-full max-w-md">
                    <!-- 移动端Logo -->
                    <div class="lg:hidden text-center mb-8">
                        <div class="w-14 h-14 mx-auto mb-4 bg-slate-900 rounded-xl flex items-center justify-center">
                            <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                            </svg>
                        </div>
                        <h2 class="text-2xl font-bold text-slate-900">Weblog</h2>
                    </div>

                    <!-- 登录卡片 -->
                    <div class="bg-white rounded-2xl p-8 shadow-lg border border-gray-100">
                        <!-- 标题区域 -->
                        <div class="text-center mb-8">
                            <h1 class="text-3xl font-bold text-slate-900 mb-2">用户登录</h1>
                            <p class="text-slate-500">请输入您的登录凭据</p>
                        </div>

                        <!-- 登录表单 -->
                        <el-form ref="formRef" :rules="rules" :model="form" class="space-y-5">
                            <el-form-item prop="username">
                                <el-input 
                                    size="large" 
                                    v-model="form.username" 
                                    placeholder="用户名" 
                                    :prefix-icon="User" 
                                    clearable 
                                    class="login-input"
                                />
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input 
                                    size="large" 
                                    type="password" 
                                    v-model="form.password" 
                                    placeholder="密码"
                                    :prefix-icon="Lock" 
                                    clearable 
                                    show-password
                                    class="login-input"
                                />
                            </el-form-item>
                            <el-form-item class="mb-0">
                                <el-button 
                                    class="login-button w-full mt-6" 
                                    size="large" 
                                    :loading="loading" 
                                    type="primary" 
                                    @click="onSubmit"
                                >
                                    {{ loading ? '登录中...' : '登录' }}
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <!-- 底部信息 -->
                    <div class="text-center mt-8 text-sm text-slate-400">
                        Spring Boot + Vue 3 + Vite
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
// 引入 Element Plus 中的用户、锁图标
import {User,Lock} from "@element-plus/icons-vue"
import { login } from '@/api/admin/user'
import { reactive,ref,onMounted, onBeforeUnmount} from 'vue' 
import { showMessage} from '@/composables/util'
import { useRouter } from 'vue-router';
import { setToken} from '@/composables/auth'
import { useUserStore } from '@/stores/user'
// 正确导入背景图片
import backgroundImage from '@/assets/程序员.png'

const userStore = useUserStore()


const router = useRouter()
// 定义响应式的表单对象
const form = reactive({
    username: '',
    password: ''
})

const formRef=ref(null)
//表单验证规则
const rules={
    username:[
        {
            required: true,
            message: "用户名不能为空",
            trigger:'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
        },
    ]
}
// 登录按钮加载
const loading = ref(false)
const onSubmit = () => {
    console.log('登录')
     // 先验证 form 表单字段
     formRef.value.validate((valid) => {
        if (!valid) {
            console.log('表单验证不通过')
            return false
        }
        // 开始加载
        loading.value = true

        // 调用登录接口
        login(form.username, form.password).then((res) => {
            console.log(res)
            // 判断是否成功
            if (res.success == true) {
                // 提示登录成功
                showMessage('登录成功')
                // 跳转到后台首页
                router.push('/admin/index')
                // 存储 Token 到 Cookie 中
                let token = res.data.token
                setToken(token)

                //获取用户信息，并存储到全局状态中
                userStore.setUserInfo()
            
            }else{
                // 获取服务端返回的错误消息
                let message = res.message
                // 提示消息
                showMessage(message,'error')
            }
        })
        .finally(() => {
            // 结束加载
            loading.value = false
        })
    })
    
}

// 按回车键后，执行登录事件
function onKeyUp(e) {
    console.log(e)
    if (e.key == 'Enter') {
        onSubmit()
    }
}

// 添加键盘监听
onMounted(() => {
    // console.log('添加键盘监听')
    // document.addEventListener('keyup', onKeyUp)
})

// 移除键盘监听
onBeforeUnmount(() => {
    document.removeEventListener('keyup', onKeyUp)
})
</script>

<style scoped>
/* 简约输入框样式 */
:deep(.login-input .el-input__wrapper) {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: none;
    height: 48px;
}

:deep(.login-input .el-input__wrapper:hover) {
    border-color: #cbd5e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

:deep(.login-input .el-input__wrapper.is-focus) {
    border-color: #475569;
    box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.1);
}

:deep(.login-input .el-input__inner) {
    color: #1e293b;
    font-weight: 400;
    font-size: 15px;
}

:deep(.login-input .el-input__inner::placeholder) {
    color: #94a3b8;
    font-weight: 400;
}

:deep(.login-input .el-input__prefix) {
    color: #64748b;
}

:deep(.login-input .el-input__suffix) {
    color: #64748b;
}

/* 简约登录按钮样式 */
:deep(.login-button) {
    height: 48px;
    border-radius: 8px;
    background: #1e293b;
    border: none;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.2s ease;
    box-shadow: none;
}

:deep(.login-button:hover) {
    background: #334155;
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

:deep(.login-button:active) {
    background: #0f172a;
    transform: none;
}

:deep(.login-button.is-loading) {
    background: #1e293b;
}

/* 表单验证错误消息样式 */
:deep(.el-form-item__error) {
    color: #dc2626;
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 13px;
    margin-top: 4px;
    font-weight: 400;
}

/* 表单项间距优化 */
:deep(.el-form-item) {
    margin-bottom: 20px;
}

:deep(.el-form-item:last-child) {
    margin-bottom: 0;
}

/* 移除默认的Element Plus样式 */
:deep(.el-form-item__label) {
    color: #374151;
    font-weight: 500;
}

/* 响应式优化 */
@media (max-width: 1024px) {
    .min-h-screen {
        background: #f8fafc;
    }
}

/* 简约滚动条 */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 微妙的悬停效果 */
.transition-all {
    transition: all 0.2s ease;
}

/* 卡片悬停效果 */
.bg-white:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 左侧背景相关样式 */
.backdrop-blur-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Logo容器尺寸修复 */
.w-18 {
    width: 4.5rem;
}

.h-18 {
    height: 4.5rem;
}

/* 左侧特性卡片悬停效果 */
.bg-white\/70:hover {
    background: rgba(255, 255, 255, 0.85);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* 确保背景图片正确显示 */
.bg-cover {
    background-size: cover;
}

.bg-center {
    background-position: center;
}

.bg-no-repeat {
    background-repeat: no-repeat;
}
</style>
